<template>
  <page-container
    showBack
    showTitle>
    <template v-slot:left-title>
      <span class="movieName">{{ `《${$route.query.name}》` }}</span
      >用户详情
    </template>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 4 }"
      @on-search="handleSearch">
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      :tableOptions="{ menu: false }"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="handleView(row)">
        </el-button>
      </template>
    </avue-table>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { querySimpelUserDetail } from '@/api/databoard'
import { searchColumns, tableColumns } from './config/table-config'

export default {
  mixins: [tableMixins],
  data() {
    return {
      dataList: [],
      childList: [],
      searchForm: {
        dateRange: [
          this.$dayjs().startOf('month').valueOf(),
          this.$dayjs().endOf('month').valueOf(),
        ],
      },
      editForm: {},
    }
  },
  computed: {
    ...mapGetters(['commonData']),
    userList() {
      return this.commonData?.userList ?? []
    },
    searchColumns,
    tableColumns,
  },
  methods: {
    fetchMethod: querySimpelUserDetail,

    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      const [start, end] = this.searchForm.dateRange
      searchParams.start = start && this.$dayjs(this.$startStamp(start)).unix()
      searchParams.end = end && this.$dayjs(this.$endStamp(end)).unix()

      searchParams.film_id = this.$route.query.id
      delete searchParams.dateRange
      return searchParams
    },
    handleView(row) {},
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped>
.movieName {
  font-weight: 600;
  font-size: 16px;
}
</style>
